<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />

			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="搜索支付宝商户appId、应用id" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table" />
		</cl-row>

		<cl-row>
			<!-- <cl-flex1 /> -->
			<!-- 分页控件 -->
			<!-- <cl-pagination /> -->
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert" />
		<!-- <el-form
			ref="ruleFormRef"
			:model="state.ruleForm"
			:rules="rules"
			class="demo-ruleForm"
			label-position="top"
			status-icon
		>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-col :span="24">
						<div class="title">支付宝支付</div>
					</el-col>
					<el-form-item label="应用id" prop="aliAppId">
						<el-input v-model="ruleForm.aliAppId" />
					</el-form-item>
					<el-form-item label="支付宝账号id" prop="applicationId">
						<el-input v-model="ruleForm.applicationId" />
					</el-form-item>
					<el-form-item label="应用私钥" prop="privateKey">
						<el-input type="textarea" v-model="ruleForm.privateKey" :rows="8" />
					</el-form-item>
					<el-form-item label="支付宝公钥" prop="alipayPublicKey">
						<el-input type="textarea" v-model="ruleForm.alipayPublicKey" :rows="8" />
					</el-form-item>
					<el-form-item label="支付宝返回地址" prop="returnUrl">
						<el-input v-model="ruleForm.returnUrl" />
					</el-form-item>
					<el-form-item label="支付宝回调接口" prop="notifyUrl">
						<el-input v-model="ruleForm.notifyUrl" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-col :span="24">
						<div class="title">微信支付</div>
					</el-col>
					<el-form-item label="appid" prop="appid">
						<el-input v-model="ruleForm.appid" />
					</el-form-item>
					<el-form-item label="secret" prop="secret">
						<el-input v-model="ruleForm.secret" />
					</el-form-item>
					<el-form-item label="商户id" prop="mchid">
						<el-input v-model="ruleForm.mchid" />
					</el-form-item>
					<el-form-item label="商户apiclient_key" prop="apiclient_key">
						<el-input v-model="ruleForm.apiclient_key" />
					</el-form-item>
					<el-form-item label="商户apiclient_cert" prop="apiclient_cert">
						<el-input v-model="ruleForm.apiclient_cert" />
					</el-form-item>
					<el-form-item label="主播预览code" prop="apiclient_cert">
						<el-input v-model="ruleForm.viewCode" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-button :loading="subLoading" type="primary" @click="handleSubmit()"
						>提交</el-button
					>
				</el-col>
			</el-row>
		</el-form> -->
	</cl-crud>
</template>

<script lang="ts" name="paySetting-alipay" setup>
import { useCrud, useTable, useUpsert, useForm } from "@cool-vue/crud";
import { useCool } from "/@/cool";
import { onMounted, reactive, ref, toRefs } from "vue";

const { service } = useCool();

const options = reactive({
	type: [
		{ label: "支付宝", value: 0, type: "danger" },
		{ label: "微信", value: 1, type: "success" }
	],
	status: [
		{ label: "是", value: 1, type: "success" },
		{ label: "否", value: 0, type: "danger" }
	]
});

// cl-upsert
const Upsert = useUpsert({
	props: {
		labelPosition: "top"
	},
	items: [
		{
			label: "支付宝应用id",
			prop: "aliAppId",
			component: { name: "el-input", props: { clearable: true } },
			required: true
		},
		{
			label: "支付宝账号id",
			prop: "applicationId",
			component: { name: "el-input", props: { clearable: true } },
			required: true
		},
		{
			label: "应用私钥",
			prop: "privateKey",
			component: { name: "el-input", props: { type: "textarea", rows: 4 } },
			required: true
		},
		{
			label: "支付宝公钥",
			prop: "alipayPublicKey",
			component: { name: "el-input", props: { type: "textarea", rows: 4 } },
			required: true
		},
		{
			label: "支付宝返回地址",
			prop: "returnUrl",
			component: { name: "el-input", props: { clearable: true } },
			required: true
		},
		{
			label: "支付宝回调接口",
			prop: "notifyUrl",
			component: { name: "el-input", props: { clearable: true } },
			required: true
		},

		{
			label: "微信appid",
			prop: "appid",
			component: { name: "el-input", props: { clearable: true } },
			required: true
		},
		{
			label: "微信secret",
			prop: "secret",
			component: { name: "el-input", props: { clearable: true } },
			required: true
		},
		{
			label: "商户id",
			prop: "mchid",
			component: { name: "el-input", props: { clearable: true } },
			required: true
		},
		{
			label: "商户apiclient_key",
			prop: "apiclient_key",
			component: { name: "el-input", props: { clearable: true } },
			required: true
		},
		{
			label: "商户apiclient_cert",
			prop: "apiclient_cert",
			component: { name: "el-input", props: { clearable: true } },
			required: true
		},
		{
			label: "主播预览code",
			prop: "viewCode",
			component: { name: "el-input", props: { clearable: true } },
			required: true
		},
		{
			label: "是否默认",
			prop: "status",
			component: { name: "el-radio-group", options: options.status },
			required: true,
			value: 0
		}
	]
});

// cl-table
const Table = useTable({
	columns: [
		{ type: "selection" },
		{ label: "应用id", prop: "applicationId", minWidth: 140 },
		{ label: "支付宝商户appId", prop: "aliAppId", minWidth: 140 },
		{ label: "应用私钥", prop: "privateKey", showOverflowTooltip: true, minWidth: 200 },
		{ label: "支付宝返回地址", prop: "returnUrl", minWidth: 140 },
		{ label: "支付宝回调接口", prop: "notifyUrl", minWidth: 140 },
		{ label: "是否默认", prop: "status", dict: options.status, minWidth: 140 },
		{
			label: "更新时间",
			prop: "updateTime",
			minWidth: 170,
			sortable: "custom",
			component: { name: "cl-date-text" }
		},
		{ type: "op", buttons: ["edit", "delete"] }
	]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.paySetting.alipay
	},
	(app) => {
		app.refresh();
	}
);

let state = reactive({
	ruleForm: {
		id: 1,
		aliAppId: "", // 应用id
		applicationId: "", // 账号id
		privateKey: "", // 应用私钥
		alipayPublicKey: "", // 支付宝公钥
		returnUrl: "", // 支付宝返回地址
		notifyUrl: "", // 支付宝回调接口
		appid: "", // 微信appid
		secret: "", // 微信secret
		mchid: "", // 微信商户id
		apiclient_key: "", // 微信商户apiclient_key
		apiclient_cert: "", // 微信商户apiclient_cert
		viewCode: "",
		status: 0
	}
});

let { ruleForm } = toRefs(state);

let rules = reactive({
	aliAppId: { required: true, message: "请输入账号id", trigger: "blur" }, // 账号id
	applicationId: { required: true, message: "请输入应用id", trigger: "blur" }, // 应用id
	privateKey: { required: true, message: "请输入应用私钥", trigger: "blur" }, // 应用私钥
	alipayPublicKey: { required: true, message: "请输入支付宝公钥", trigger: "blur" }, // 支付宝公钥
	returnUrl: { required: true, message: "请输入支付宝返回地址", trigger: "blur" }, // 支付宝返回地址
	notifyUrl: { required: true, message: "请输入支付宝回调接口", trigger: "blur" } // 支付宝回调接口
});

let ruleFormRef = ref<any>(null);
import { ElMessage } from "element-plus";
let subLoading = ref(false);
const handleSubmit = async () => {
	ruleFormRef.value.validate(async (valid, fields) => {
		if (valid) {
			try {
				subLoading.value = true;
				let data = await service.paySetting.alipay.update(state.ruleForm);
				ElMessage({
					message: "支付信息修改成功",
					type: "success"
				});
				subLoading.value = false;
			} catch (error) {
				subLoading.value = false;
				ElMessage({
					message: "支付信息修改失败",
					type: "error"
				});
			}
		} else {
			console.log("error submit!", fields);
		}
	});
};

const getInfo = async () => {
	let data: any = await service.paySetting.alipay.info({ id: 1 });
	console.log(data, "data");
	state.ruleForm = data;
};

onMounted(() => {
	getInfo();
});
</script>

<style lang="scss" scoped>
.title {
	font-weight: bold;
	margin: 10px 0;
}
</style>
